<template>
  <div>
    <el-form label-width="80px" label-position="left">
      <el-form-item label="文件:">
        <el-upload
          ref="upload"
          class="upload-demo"
          :action="action"
          :headers="headers"
          :data="postdata"
          multiple
          :accept="accept"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :show-file-list="false"
          :auto-upload="false"
          :on-preview="handlePreview"
          :on-change="handleChange"
        >
          <!-- <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
          <div v-if="!!tiptxt" class="el-upload__tip" slot="tip">
            {{ tiptxt }}
          </div>
          <el-input
            slot="trigger"
            readonly
            placeholder="请输入内容"
            v-model="filename"
            style="width:100%"
          >
            <el-button
              icon="el-icon-folder-add"
              slot="append"
              size="small"
              type="primary"
            >
              选取文件
            </el-button>
          </el-input>
          <!-- <el-button slot="trigger" size="small" type="primary">
            选取文件
          </el-button>
          <span>{{ filename }}</span> -->
        </el-upload>
      </el-form-item>
      <el-form-item label="处理方式:">
        <el-radio v-model="type" label="1">覆盖原数据</el-radio>
        <el-radio v-model="type" label="2">新增导入</el-radio>
      </el-form-item>
      <el-row style="text-align:right">
        <el-button icon="el-icon-download" type="success" @click="downExcel">
          下载导入模板
        </el-button>
        <el-button icon="el-icon-upload" type="primary" @click="upExcel">
          开始导入
        </el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth.js";
import _this from "@/main.js";
export default {
  data() {
    return {
      action: "~",
      tiptxt: "只能上传xlsx文件",
      accept: ".xlsx",
      thisDialog: {},
      headers: {},
      postdata: {},
      filename: "",
      type: "2"
    };
  },
  //外部属性
  props: {},
  //内部方法
  methods: {
    initPage() {
      let MenuId = "-1",
        jsTimeStamp = new Date().getTime(),
        data = "",
        Action = "upload";
      if (_this && _this.$route.meta.activeMenu) {
        MenuId = _this.$route.meta.activeMenu;
      }
      this.postdata = { MenuId, data, jsTimeStamp, Action };
      this.headers = { Authorization: getToken() };
    },
    //关闭
    close() {
      this.thisDialog.close();
    },
    //上传成功
    handleAvatarSuccess(file) {
      this.thisDialog.$emit("onSuccess", file);
    },
    //上传前
    beforeAvatarUpload(file) {
      this.thisDialog.$emit("onbeforeUpload", file);
    },
    //上传前
    handlePreview(file) {
      // console.log(file);
    },
    //改变
    handleChange(file) {
      // Object { status: Getter & Setter, name: Getter & Setter, size: Getter & Setter, percentage: Getter & Setter, uid: Getter & Setter, raw: Getter & Setter, … }
      this.filename = file.name;
      this.thisDialog.$emit("onChange", file);
    },
    downExcel() {
      var elemIF = document.createElement("iframe");
      elemIF.src = "https://localhost:44311/api/System1/downExcel";
      elemIF.style.display = "none";
      document.body.appendChild(elemIF);
    },
    //上传
    upExcel() {
      this.postdata.data = JSON.stringify({ type: this.type });
      this.$refs.upload.submit();
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {},
  //监视
  watch: {}
};
</script>

<style lang="scss" scoped>
.upload-demo {
  //width: 380px;
  //text-align: center;
  /deep/.el-upload {
    width: 100%;
    text-align: left;
  }
  span {
    margin-left: 20px;
  }
}
</style>
